<!--建立考核模板首页 -->
<template>
  <div>
    <div v-if="!createThree3">
      <div v-if="!createThree2">
        <div style="height: 700px; margin: 25px">
          <!-- 考核模板 -->
          <el-row class="createMUban" v-if="!looks">
            <div style="width:400px">
              <el-button
              type="primary"
                @click="addEquipment()"
              >+ 发布考核通知</el-button>
            </div>
            <div style="margin-left:63%">
              <el-form style="display:flex;">
                <el-form-item label="年份" prop="period">
                  <el-date-picker
                    type="year"
                    v-model="years"
                    value-format="yyyy"
                    format="yyyy年"
                    placeholder="请选择"
                    style="width:75%; height: 32px;"
                  ></el-date-picker>
                </el-form-item>
                <!--   @click="sousuo" -->
                <el-button
                  @click="sousuo()"
                  type="primary"
                  style="height:32px; padding:8px 20px;margin-top:4px"
                >搜索</el-button>
              </el-form>
            </div>
          </el-row>

          <!-- 表格信息 -->
          <el-row>
            <el-table
              :data="tableData"
              style="width: 100%; color: #333333;font-size: 14px"
              height="700"
              align="center"
              :header-cell-style="{ background: '#ECF1F9' }"
            >
              <el-table-column fixed type="index" align="center" label="序号" width="80"></el-table-column>
              <el-table-column prop="year" align="center" label="考核年度" width="120">
                <template slot-scope="scope">
                  <span>{{getFormatedTimeStr(scope.row.year)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="examineSubject" align="center" label="主题"></el-table-column>
              <!-- <el-table-column prop="startTime" align="center" label="填报开始时间">
                <template slot-scope="scope">
                  <span>{{formatYearMonthDay(scope.row.startTime)}}</span>
                </template>
              </el-table-column> -->
              <el-table-column prop="endTime" align="center" label="填报截止时间">
                <template slot-scope="scope">
                  <span>{{formatYearMonthDay(scope.row.endTime)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" align="center" label="发布时间">
                <template slot-scope="scope">
                  <span>{{scope.row.createTime==null?'-': formatYearMonthDay(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="status" align="center" label="考核状态" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.status=='NOT_START'" style="color: #EF7045">未开始</span>
                  <span v-if="scope.row.status=='PROCEED'" style="color: #35A06D">进行中</span>
                  <span v-if="scope.row.status=='FINISHED'">已结束</span>
                  <span v-if="scope.row.status=='CANCEL'" style="color: #ccc">已撤销</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status=='NOT_START'?true:false"
                    type="text"
                    size="small"
                    style="color: #3B95FF"
                    @click.native.prevent="editRow(scope.row)"
                  >编辑</el-button>
                  <el-button
                    v-if="scope.row.status=='NOT_START'?true:false"
                    @click.native.prevent="returnRow(scope.row)"
                    type="text"
                    size="small"
                    style="color:#E86565"
                  >撤销</el-button>
                  <!-- <el-button
                    v-if="scope.row.status=='CANCEL'?true:false"
                    type="text"
                    size="small"
                    style="color:#ccc"
                  >已撤销</el-button>-->
                  <el-button
                    v-if="scope.row.status=='NOT_START' || scope.row.status=='CANCEL' || scope.row.status=='FINISHED'?true:false"
                    @click.native.prevent="deleteRow(scope.row)"
                    type="text"
                    size="small"
                    style="color:#E86565"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row>
              <el-pagination
                style="text-align: right;margin-top:16px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </el-row>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 新增发布公告 -->
    <el-dialog
      :append-to-body="true"
      :title="titleMap[dialogStatus]"
      :visible.sync="Release"
      width="26%"
      v-if="Release"
      @close="closeTargets('ruleForm')"
    >
      <el-form
        :rules="rules"
        label-position="right"
        :model="ruleForm"
        ref="ruleForm"
        style="margin-left: 35px"
      >
        <el-form-item label="考核年份" :label-width="formLabelWidth" prop="year">
          <el-date-picker
            type="year"
            v-model="ruleForm.year"
            value-format="yyyy"
            format="yyyy年"
            placeholder="请选择"
            style="width:70%; height: 32px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="考核主题" :label-width="formLabelWidth" prop="examineSubject">
          <el-input style="width:70%" v-model="ruleForm.examineSubject"></el-input>
        </el-form-item>
        <!-- <el-form-item label="考核开始时间" :label-width="formLabelWidth" prop="startTime">
          <el-date-picker
            v-model="ruleForm.startTime"
            type="datetime"
            placeholder="选择日期"
            style="width:70%"
            :picker-options="pickerOptions"
            @change="changeData(true)"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item label="填报截止时间" :label-width="formLabelWidth" prop="endTime">
          <!--  @change="changeData(false)" -->
          <el-date-picker
            v-model="ruleForm.endTime"
            type="datetime"
            style="width:70%"
            placeholder="选择日期"
            :picker-options="pickerOptions"

          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="closeTargets('ruleForm')"
          style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              "
        >取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              "
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

    <script>
import moment from "moment";
import {
  deletePeople,
  getShenBao,
  addShenBao,
  editShenBao,
  returnShenBao,
  deleteShenBao
} from "@/api2/keyan"; //
export default {
  data() {
    return {
      Release: false,
      createThree2: false,
      createThree3: false,
      ruleForm: {
        examineSubject: "",
        // startTime: "",
        endTime: "",
        year: ""
      },
      pickerOptions: {
        disableDate: time => {
          return time.getTime() > Date.now();
        }
      },
      dialogStatus: "",
      titleMap: { addEquipment: "发布考核通知", editEquipment: "编辑考核通知" },
      //规则校验
      rules: {
        //指标名称校验
        year: [{ required: true, message: "年份必选", trigger: "change" }],
        examineSubject: [
          { required: true, message: "请输入主题", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        // startTime: [
        //   { required: true, message: "考核开始时间必选", trigger: "change" }
        // ],
        endTime: [
          { required: true, message: "填报截止时间必选", trigger: "change" }
        ]
      },
      years: "",
      ids: "",
      personTechnicalList: "", //职称列表
      nameList: "",
      centerDialogVisible1: false,
      deletes: true,
      multipleSelectionDepartment: [], // 用于保存选中的行
      dataTypes: {},
      nameList: [],
      times: "",
      assessUserTypes: "",
      centerDialogVisible: false,
      looks: false,
      tableDatadialog: [], //表格数据
      createThree: false, //按钮的开关
      formLabelWidth: "120px", //label-width
      pageNum: 1, //当前页
      total: 0, //总条数
      pageSize: 10, //当前页容量
      tableData: [],
      userList: []
    };
  },
  created() {
    this.getList(); //获取表格数据
  },
  methods: {
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = "YYYY") {
      return moment(stamp).format(str);
    },
    formatYearMonthDay(src) {
      return moment(src).format("YYYY-MM-DD HH:mm");
    },
    // 新增
    addEquipment() {
      //新增弹框标题
      this.dialogStatus = "addEquipment";
      this.Release = true;
      this.ruleForm = {
        examineSubject: "",
        // startTime: "",
        endTime: "",
        year: ""
      };
    },
    //查看
    returnRow(rows) {
      console.log(rows);
      this.ids = rows.id;
      this.$confirm("确定撤销吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const xmOpenReport = {
            id: rows.id,
            status: "CANCEL"
          };

          returnShenBao(xmOpenReport).then(res => {
            if (res.code == 0) {
              this.$message.success("撤销成功");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    editRow(rows) {
      this.dialogStatus = "editEquipment";
      this.Release = true;
      this.ids = rows.id;
      this.ruleForm.examineSubject = rows.examineSubject;
      // this.ruleForm.startTime = rows.startTime;
      this.ruleForm.endTime = rows.endTime;
      this.ruleForm.year = rows.year;
    },
    // 表格内删除按钮的点击事件
    deleteRow(rows) {
      const ids = rows.id;
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          console.log(ids);
          deleteShenBao(ids).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              const totalPage = Math.ceil((this.total - 1) / this.pageSize);
              // 记住删除最后一条数据时当前码是最后一页
              const pageNums =
                this.pageNum > totalPage ? totalPage : this.pageNum;
              // 重新记录当前页码
              this.pageNum = pageNums < 1 ? 1 : pageNums;
              //删除成功 回调列表接口
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    //获取表格数据
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getShenBao(params)
        .then(res => {
          console.log(res);
          this.tableData = res.data.reverse();
          this.total = res.total; //总条数
          let arr = [];
          res.data.forEach(item => {
            arr.push(item.personTechnical);
          });
          this.personTechnicalList = arr;
        })
        .catch(e => {
          console.log(e);
        });
    },
    //搜索
    async sousuo() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        year: this.years
      };
      const res = await getShenBao(params);
      if (res.code == 0) {
        this.tableData = res.data.reverse();
        this.total = res.total; //总条数
      }
    },
    changeData(flag) {
      if (flag) {
        if (this.ruleForm.endTime) {
          if (this.ruleForm.beginTime > this.ruleForm.endTime) {
            this.ruleForm.beginTime = null;
            this.$message.error("开始时间不能大于结束时间！");
          }
        }
      } else {
        if (this.ruleForm.beginTime) {
          if (this.ruleForm.beginTime > this.ruleForm.endTime) {
            this.ruleForm.endTime = null;
            this.$message.error("结束时间不能小于开始时间！");
          }
        }
      }
    },
    submitForm(formName) {
      if (this.dialogStatus == "addEquipment") {
        console.log(formName);
        const xmOpenReport = {
          examineSubject: this.ruleForm.examineSubject,
          // startTime: this.ruleForm.startTime,
          endTime: this.ruleForm.endTime,
          year: this.ruleForm.year
        };
        console.log(xmOpenReport);
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 调用接口
            addShenBao(xmOpenReport)
              .then(res => {
                console.log(res);
                if (res.code == 0) {
                  this.$message({
                    message: "发布成功",
                    type: "success"
                  });
                  this.Release = false;
                  this.ruleForm = {
                    examineSubject: "",
                    // startTime: "",
                    endTime: "",
                    year: ""
                  };
                  this.$refs.ruleForm.clearValidate();
                  this.getList();
                } else {
                  this.$message.error("信息填写不完整!");
                  return false;
                }
              })
              .catch(e => {
                console.log(e);
              });
          }
        });
      } else {
        const xmOpenReport = {
          id: this.ids,
          examineSubject: this.ruleForm.examineSubject,
          // startTime: this.ruleForm.startTime,
          endTime: this.ruleForm.endTime,
          year: this.getFormatedTimeStr(this.ruleForm.year)
        };
        console.log(xmOpenReport);
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 调用接口
            editShenBao(xmOpenReport)
              .then(res => {
                console.log(res);
                if (res.code == 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success"
                  });
                  this.Release = false;
                  this.ruleForm = {
                    examineSubject: "",
                    // startTime: "",
                    endTime: "",
                    year: ""
                  };
                  this.$refs.ruleForm.clearValidate();
                  this.getList();
                } else {
                  this.$message.error("信息填写不完整!");
                  return false;
                }
              })
              .catch(e => {
                console.log(e);
              });
          }
        });
      }
    },
    closeTargets() {
      this.Release = false;
      this.ruleForm = {
        examineSubject: "",
        // startTime: "",
        endTime: "",
        year: ""
      };
    }
  }
};
</script>

    <style lang="scss" scoped>
.app-container {
  height: 100%;
  background-color: #f4f5fc;
}
.createMUban {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep [data-v-125ad6e6] .el-step.is-horizontal .el-step__line {
  opacity: 0;
}
</style>
